import React from 'react';
import PropTypes from 'prop-types';
import Echarts from '@kuiper-components/echarts';
import cn from 'classnames';

import EmptyPie from '../../../../components/empty/EmptyPie';
import Table from './Table';
import ChartTitle from '../../../../components/ChartTitle';
import s from './style.module.css';

const option = {
	tooltip: {
		trigger: 'item',
		formatter({ name, percent, value }) {
			return `<div style="display:flex;padding:0.5rem">
			<div style="color: #2B2C32;padding-right: 0.25rem">${name}:</div>
			<div style="color: #2B2C32;padding-right: 0.25rem">${value}</div>
			<div style="color: #2B2C32">(${percent}%)</div>
		</div>`;
		},
		backgroundColor: '#fff',
		textStyle: {
			color: '#696C78',
			fontSize: 12,
		},
	},
	legend: {
		show: true,
		orient: 'vertical',
		right: 10,
		top: 76,
		icon: 'circle',
		itemWidth: 8,
		itemHeight: 8,
		padding: [16, 8],
		textStyle: {
			fontSize: 14,
			lineHeight: 20,
			color: '#696C78',
		},
	},
	series: [
		{
			center: ['45%', '50%'],
			radius: ['45%', '60%'],
			name: '',
			type: 'pie',
			avoidLabelOverlap: false,
			hoverOffset: 5,
			showSymbol: false,
			label: {
				show: false,
				rich: {
					normal: {
						color: '#696C78',
						fontSize: 14,
					},
					highlight: {
						color: '#F04038',
						fontSize: 22,
					},
				},
			},
			emphasis: {
				label: {
					show: false,
					fontSize: 14,
				},
			},
			labelLine: {
				show: false,
			},
		},
	],
};

export default function DomainChange({
	className,
	tasks,
	result,
	prevResult,
	detectTime,
}) {
	const { pieData, tableData } = React.useMemo(() => {
		let initTasks = [];
		if (!detectTime) {
			initTasks = tasks;
		} else {
			const task = detectTime === 'last' ? result : prevResult;

			const domainTask = {
				...task,
				result: {
					...(task?.result || {}),
					warnings: (task?.result?.warnings || []).filter(
						w => w.category === 'subdomain'
					),
				},
			};
			initTasks = [domainTask];
		}

		const res = initTasks.reduce(
			(res, initTask) => {
				const { endTime, result: resultData } = initTask;

				resultData.warnings.forEach(warn => {
					res.pieData[warn.detail.op]++;
					res.tableData.push({
						datetime: endTime,
						affects: warn.affects,
						type: warn?.detail?.op,
						isResolved: warn?.isResolved,
					});
				});
				return res;
			},
			{
				pieData: { add: 0, remove: 0 },
				tableData: [],
			}
		);
		return res;
	}, [detectTime, tasks]);

	option.series[0].data = [
		{ name: '域名上线', value: pieData.add, color: '#F04038' },
		{ name: '域名下线', value: pieData.remove, color: '#FFA54E' },
	];

	return (
		<div className={cn(className, s.domainChange)}>
			<div className={cn(s.pieContainer)}>
				<ChartTitle className={s.label}>域名变动分布</ChartTitle>
				{tableData.length === 0 ? (
					<div className={s.emptyContainer}>
						<EmptyPie />
					</div>
				) : (
					<Echarts className={s.chart} option={option} key={detectTime} />
				)}
			</div>
			<Table className={cn(s.item, 'tableFormat')} dataSource={tableData} />
		</div>
	);
}

DomainChange.propTypes = {
	className: PropTypes.string,
	tasks: PropTypes.arrayOf(
		PropTypes.shape({
			_id: PropTypes.string,
			target: PropTypes.string,
			result: PropTypes.object,
		})
	),
	result: PropTypes.shape({
		target: PropTypes.string,
		result: PropTypes.shape({
			warningCount: PropTypes.number,
			warnings: PropTypes.shape({
				category: PropTypes.string,
				affects: PropTypes.string,
				detail: PropTypes.object,
			}),
		}),
	}),
	prevResult: PropTypes.shape({
		target: PropTypes.string,
		result: PropTypes.shape({
			warningCount: PropTypes.number,
			warnings: PropTypes.shape({
				category: PropTypes.string,
				affects: PropTypes.string,
				detail: PropTypes.object,
			}),
		}),
	}),
	detectTime: PropTypes.string,
};

DomainChange.defaultProps = {
	className: s.domainChange,
};
